<template>
  <div class="container">
    <div class="header">
      <!-- <div class="hidden" ref="hiddenColumns"><slot></slot></div> -->
      <tableHeader :headerList="headerList"></tableHeader>
    </div>
    <div class="body">
      <div v-for="(item, index) in list" :key="index" class="tableHeader tableBody">
        <template v-for="(childItem, childIndex) in headerList">
          <div
            class="tableItem-label table-body-item"
            :style="{width:childItem.width+'px',textAlign:childItem.align}"
            :key="childIndex"
            v-if="typeof childItem.prop === 'function'"
            v-html="childItem.prop(item, index)"
          ></div>
          <div class="tableItem-label table-body-item"  :style="{width:childItem.width+'px',textAlign:childItem.align}" :key="childIndex" v-else>
            {{ item[childItem.prop] }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import tableHeader from "./table-header.vue";
import tableBody from "./table-body.vue";
export default {
  components: {
    tableBody,
    tableHeader,
  },
  name: "data-v-table",
  props: {
    headerList: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    console.log(this.headerList);
  },
};
</script>
<style lang="less" src='./index.less' scoped></style>